<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author FIRE
-->
<template>
  <div>
    <Tabs v-model:activeKey="activeKey" tabPosition="top" @change="tabchange">
      <Tabs.TabPane :key="0" :forceRender="true" :tab="'单品详情'">
        <BasicTable @register="registerTable">
          <template #tableTitle>
            <Icon :icon="getTitle.icon" class="m-1 pr-1" />
            <span> 单品详情 </span>
          </template>
          <template #toolbar>
            <!-- v-auth="'btdm:btdmBoxMain:import'"  v-auth="'btdm:btdmBoxMain:expoet'" -->
            <a-button type="default" @click="handleImport()">
              <Icon icon="i-ant-design:upload-outlined" /> {{ t('导入') }}
            </a-button>
            <a-button type="default" @click="handleExport()">
              <Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
            </a-button>

          </template>
        </BasicTable>
      </Tabs.TabPane>

      <Tabs.TabPane :key="1" :forceRender="true" :tab="'箱码详情'">
        <BasicTable @register="registerTable2">
          <template #tableTitle>
            <Icon :icon="getTitle.icon" class="m-1 pr-1" />
            <span> 箱码详情 </span>
          </template>
          <template #toolbar>

            <a-button type="success" ghost @click="btnEditSel()">
              <Icon icon="i-clarity:note-edit-line'" /> {{ t('勾选行编辑') }}
            </a-button>

            <a-button type="success" ghost @click="btnEditCon()">
              <Icon icon="i-clarity:note-edit-line'" /> {{ t('按查询条件编辑') }}
            </a-button>
            <Popconfirm :title="t('是否确认删除？')" @confirm="btnDelSel()">
              <a-button type="error" ghost>
                <Icon icon="ant-design:delete-outlined" /> {{ t('勾选行删除') }}
              </a-button>
            </Popconfirm>
            <Popconfirm :title="t('是否确认删除？')" @confirm="btnDelCon()">
              <a-button type="error" ghost>
                <Icon icon="ant-design:delete-outlined" /> {{ t('按查询条件删除') }}
              </a-button>
            </Popconfirm>

            <a-button type="default" @click="handleImport()">
              <Icon icon="i-ant-design:upload-outlined" /> {{ t('导入') }}
            </a-button>
            <a-button type="default" @click="handleExport2()">
              <Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
            </a-button>
          </template>

        </BasicTable>
      </Tabs.TabPane>
    </Tabs>
    <InputForm @register="registerDrawer" @success="handleSuccess" />
    <FormImport @register="registerImportModal" @success="handleSuccess2" />
  </div>
</template>
<script lang="ts" setup name="ViewsSrmAsnPreshPuOrderPreDataList">
  import { unref, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
  import { btdmBoxDetailsListData, mainListData,delBatch } from '/@/api/wms/btdm/btdmBoxMain';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useModal } from '/@/components/Modal';
  import { useDrawer } from '/@/components/Drawer';
  import { FormProps } from '/@/components/Form';
  import { Tabs, Popconfirm } from 'ant-design-vue';
  import FormImport from './formImport.vue';
  import InputForm from './form.vue';

  const { t } = useI18n('btdm.btdmBoxMain');
  const { showMessage } = useMessage();
  const { meta } = unref(router.currentRoute);
  const activeKey = ref < number > (0);

  const getTitle = {
    icon: meta.icon || 'i-ant-design:book-outlined',
    // value: meta.title || t('订单备货区记录管理'),
  };

  const searchForm: FormProps = {
    baseColProps: { lg: 6, md: 8 },
    labelWidth: 90,
    schemas: [
      {
        label: t('导入批号'),
        field: 'hid.djno',
        component: 'Input',
      },
      {
        label: t('箱码'),
        field: 'hid.boxCode',
        component: 'Input',
      },
      {
        label: t('单品码'),
        field: 'procode',
        component: 'Input',
      },
      
      {
        label: t('出库单号'),
        field: 'ckCode',
        component: 'Input',
      },
      {
        label: t('序号起'),
        field: 'rowId_gte',
        component: 'Input',
      },
      {
        label: t('序号止'),
        field: 'rowId_lte',
        component: 'Input',
      },
      {
        label: t('采购订单号'),
        field: 'hid.pocode',
        component: 'Input',
      },
      {
        label: t('是否入库'),
        field: 'isrkCode',
        component: 'Select',
        componentProps: {
          dictType: 'sys_yes_no',
        },
      },
    ],
  };

  const tableColumns: BasicColumn[] = [
    {
      title: t('导入批号'),
      dataIndex: 'hid.djno',
      key: 'hid.dj_no',
      sorter: true,
      width: 120,
      align: 'left',
    },
    {
      title: t('序号'),
      dataIndex: 'rowId',
      key: 'a.rowId',
      sorter: true,
      width: 120,
      align: 'left',
    },
    {
      title: t('单品码'),
      dataIndex: 'procode',
      key: 'a.inv_barcode',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('批次号'),
      dataIndex: 'bachNum',
      key: 'a.bach_num',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('箱码'),
      dataIndex: 'hid.boxCode',
      key: 'hid.box_barcode',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('采购订单号'),
      dataIndex: 'hid.pocode',
      key: 'hid.po_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('物料代码'),
      dataIndex: 'hid.addCode',
      key: 'hid.add_code',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('物料名称'),
      dataIndex: 'hid.cinvname',
      key: 'hid.cinv_name',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('物料编码'),
      dataIndex: 'hid.cinvcode',
      key: 'hid.cinv_code',
      sorter: true,
      width: 250,
      align: 'left',
      ifShow: false,
    },
    {
      title: t('发货单号'),
      dataIndex: 'fkCode',
      key: 'a.fh_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('入库单号'),
      dataIndex: 'hid.rkCode',
      width: 150,
      align: 'left',
    }, {
      title: t('出库单号'),
      dataIndex: 'ckCode',
      key: 'a.ck_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
  ];


  const searchForm2: FormProps = {
    baseColProps: { lg: 6, md: 8 },
    labelWidth: 90,
    schemas: [
      {
        label: t('导入批号'),
        field: 'hid.djno',
        component: 'Input',
      },
      {
        label: t('箱码'),
        field: 'hid.boxCode',
        component: 'Input',
      },
     
      {
        label: t('采购订单号'),
        field: 'hid.pocode',
        component: 'Input',
      },
      {
        label: t('是否入库'),
        field: 'isrkCode',
        component: 'Select',
        componentProps: {
          dictType: 'sys_yes_no',
        },
      },
      {
        label: t('序号起'),
        field: 'rowId_gte',
        component: 'Input',
      },
      {
        label: t('序号止'),
        field: 'rowId_lte',
        component: 'Input',
      },

    ],
  };

  const tableColumns2: BasicColumn[] = [
    {
      title: t('导入批号'),
      dataIndex: 'djno',
      key: 'a.dj_no',
      sorter: true,
      width: 120,
      align: 'left',
    },
    {
      title: t('序号'),
      dataIndex: 'rowId',
      key: 'a.rowId',
      sorter: true,
      width: 120,
      align: 'left',
    },

    {
      title: t('箱码'),
      dataIndex: 'boxCode',
      key: 'a.box_barcode',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('采购订单号'),
      dataIndex: 'pocode',
      key: 'a.po_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('物料代码'),
      dataIndex: 'addCode',
      key: 'a.add_code',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('物料名称'),
      dataIndex: 'cinvname',
      key: 'a.cinv_name',
      sorter: true,
      width: 250,
      align: 'left',
    },
    {
      title: t('物料编码'),
      dataIndex: 'cinvcode',
      key: 'a.cinv_code',
      sorter: true,
      width: 250,
      align: 'left',
    },

    {
      title: t('入库单号'),
      dataIndex: 'rkCode',
      key: 'a.rk_code',
      sorter: true,
      width: 150,
      align: 'left',
    },
    {
      title: t('装箱数量'),
      dataIndex: 'quty',
      key: 'a.quty',
      sorter: true,
      width: 90,
      align: 'left',
    },
    {
      title: t('发货数量'),
      dataIndex: 'fhQuty',
      key: 'a.fh_quty',
      sorter: true,
      width: 90,
      align: 'left',
    },
  ];


  const [registerTable, { reload, getForm }] = useTable({
    api: btdmBoxDetailsListData,
    beforeFetch: (params) => {
      return params;
    },
    columns: tableColumns,
    // actionColumn: actionColumn,
    formConfig: searchForm,
    showTableSetting: true,
    useSearchForm: true,
    canResize: true,
  });

  const [registerTable2, { reload: reload2, getForm: getForm2, getSelectRows: getSelectRows2 }] = useTable({
    api: mainListData,
    beforeFetch: (params) => {
      return params;
    },
    columns: tableColumns2,
    // actionColumn: actionColumn,
    formConfig: searchForm2,
    showTableSetting: true,
    useSearchForm: true,
    canResize: true,
    // immediate: false,
    rowSelection: {
      type: 'checkbox',
    },
  });

  const [registerDrawer, { openDrawer }] = useDrawer();

  async function tabchange(e) {

    if (e == '0') {
      //  await  getForm().setFieldsValue(getForm2().getFieldsValue())
      reload()
    } else {
      // await getForm2().setFieldsValue(getForm().getFieldsValue())
      reload2()
    }
  }

  async function btnEditSel() {
    if (getSelectRows2().length) {
      var selIds = ref('');
      getSelectRows2().forEach((item) => {
        selIds.value += item.id + ',';
      });
      openDrawer(true, {selIds:selIds.value});
    } else {
      showMessage('请选择至少一行数据！');
    }
  }
  async function btnEditCon() {
    const params = getForm2().getFieldsValue();
    console.log(params);
    
    // openDrawer(true, {
    //   hid:{
    //     djno:params['hid.djno'] || '',
    //     boxCode:params['hid.boxCode'] || '',
    //     pocode:params['hid.pocode'] || '',
    //   },
    //   rowId_gte:params.rowId_gte || '',
    //   rowId_lte:params.rowId_lte || '',
    // });
    openDrawer(true, params);
  }
  async function btnDelSel() {
    if (getSelectRows2().length) {
      var selIds = ref('');
      getSelectRows2().forEach((item) => {
        selIds.value += item.id + ',';
      });
      const res = await delBatch({ selIds: selIds.value });
      showMessage(res.message);
      handleSuccess();
    } else {
      showMessage('请选择至少一行数据！');
    }
  }
  async function btnDelCon() {
    const params = getForm2().getFieldsValue();
    const res = await delBatch(params);
    showMessage(res.message);
    handleSuccess();
  }

  function handleSuccess(record: Recordable) {
    reload({ record });
    reload2({ record });
  }

  async function handleSuccess2(data) {
    console.log(data,'11111');
    await getForm().setFieldsValue({'hid.djno':data})
    await getForm2().setFieldsValue({'hid.djno':data})
    reload();
    reload2();
  }


  async function handleExport() {
    const { ctxAdminPath } = useGlobSetting();
    downloadByUrl({
      url: ctxAdminPath + '/btdm/btdmBoxMain/exportData',
      params: getForm().getFieldsValue(),
    });
  }

  async function handleExport2() {
    const { ctxAdminPath } = useGlobSetting();
    downloadByUrl({
      url: ctxAdminPath + '/btdm/btdmBoxMain/exportData',
      params: getForm2().getFieldsValue(),
    });
  }

  const [registerImportModal, { openModal: importModal }] = useModal();

  function handleImport() {
    importModal(true, {});
  }
</script>